<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta content="telephone=no" name="format-detection" />
  <title>2018 考前冲刺急训</title>
  <meta itemprop="name" content="赶紧加入考前冲刺集训营！你的成绩还能再抢救一下！" />
  <meta itemprop="image" content="/img/ygshare.jp" />
  <meta name="description" itemprop="description" content="《2018全国高考考前冲刺集训》开营啦！火速加入！" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="/css/reset.css">
  <link rel="stylesheet" href="/css/normalize.css">
  <link rel="stylesheet" href="/css/jx/success.css">
  <% include ../component/_common_tongji.html %>
    <style>
      [v-cloak] {
        display: none;
      }

      #show {
        display: none;
      }
    </style>
    <script>     
      window.onload = function () {
        // 如果没有token跳回首页带上邀请码，如果页面是别人分享的，邀请码是他人的，qq中分享页面会分享当前页面
        // 所以防止分享出去后对方没有登录，所以跳转登录页的时候传上邀请码
        if (!localStorage.getItem('token')) {
          location.replace('/yyzbk?typeId=2&invitation_code=<%= invitation_code %>')
        }
        var compa = document.querySelector('#show');
        if (compa) {
          compa.style.display = 'block';
        }
      }
      var scale = 1 / devicePixelRatio;
      document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
      document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
    </script>
</head>

<body>
  <div id="app">
    <div v-if="false" style="font-size:0.3rem;" id="show">您的浏览器版本太低请升级浏览器或者使用Chrome浏览器</div>
    <div class="content" v-cloak v-if="!shareImg">
      <img src="/img/jxsuccess.jpg" alt="冲刺急训" class="jsSuccess">
      <% include ../userInfo/top_user.html %>
        <ul>
          <li @click="handleExpand(index)" class="fade-enter-active" v-for="(item,index) in userInfo.res_sign_up_info">
            <h3>已购课程：
              <span>{{item.exam_name}}</span>
              <img src="/img/shang.png" alt="" v-if="item.is_expand">
              <img src="/img/jxsuccessxia.png" alt="" v-if="!item.is_expand">
            </h3>
            <transition name="fade">
              <div class="subject" v-if="item.is_expand">
                {{item.exam_detail}}
              </div>
            </transition>
            <h3>你的兑课码：
              <span>{{item.ex_code}}</span>
            </h3>
          </li>
          <li class="line"></li>
          <li @click="use = !use" class="fade-enter-active">
            <h3>如何使用兑课码？
              <img src="/img/shang.png" alt="" v-if="use">
              <img src="/img/jxsuccessxia.png" alt="" v-if="!use">
            </h3>
            <transition name="fade">
              <!-- <div class="use" v-if="use">
                <p>《高考英语2轮复习专项特训套课》、《高考英语临考冲刺解析课》、《高考英语最后6小时急救课》兑换码兑课流程：</p><br>
                <p>第一步：<br>
                  长按本页面【你的兑课码】后的一串字符，点击复制(拷贝)。                  
                </p>
                <img src="/img/3.jpg" alt="" class="reeder">
                <p>兑换时请注意：<br>
                  《高考英语2轮复习专项特训套课》在【天利英语】小程序中兑换
                  《高考语文作文最后5小时抢分课》、《高考英语最后6小时急救课》在【天利小帮手】小程序中兑换
                  如果您购买了同时包含英语和语文课程的课程包，兑课码需要进入以上两个小程序中兑换课程。</p><br>
                <p>
                  第二步：<br>
                  在微信小程序中搜索【天利英语】或【天利小帮手】，进入小程序后，点击【我的】中【兑换课程】按钮
                </p>
                <img src="/img/1222.jpg" alt="" style="margin-right:0.2rem">
                <img src="/img/jxsuccesscode.jpg" alt="">
                <p>在框格内长按【粘贴】你的兑换码，【点击确认】。</p>
                <img src="/img/121.jpg" alt="" style="margin-right:0.2rem">
                <img src="/img/122.jpg" alt="">
                <p>你的课程就兑换成功啦！在小程序中查找你兑换的课程专栏，进入专栏即可听课。</p>
              </div> -->
              <div class="use" v-if="use">
                <p>详细兑换流程，关注天利38套公众号，回复“课程兑换”</p>
              </div>
            </transition>
          </li>
          <li @click="receive = !receive" class="fade-enter-active">
            <h3>如何领天利助学金？
              <img src="/img/shang.png" alt="" v-if="receive">
              <img src="/img/jxsuccessxia.png" alt="" v-if="!receive">
            </h3>
            <transition name="fade">
              <div class="receive" v-if="receive">
                1、购买成功后，点击右下角按钮“分享领助学金”，给好友分享一张你的高考冲刺训练营专属海报；
                <br> 2、好友通过海报扫码购买，每邀请一名好友成功购买任意课程，即可领取60元天利助学金；
                <br> 3、邀请好友数量不限，只要邀请购买成功即可累计获得一次天利助学金；
                <br> 4、天利助学金可在活动期提现。
              </div>
            </transition>
          </li>
        </ul>
        <div class="footer">
          <a href="https://jq.qq.com/?_wv=1027&k=5LJ2wfd" class="getQQ">
            <img src="/img/7_01.png" alt=""> 加入集训营</a>
          <a href="javascript:;" @click="handleShareImg">
            <img src="/img/jxshare.png" alt=""> 分享领助学金
          </a>
        </div>
        <a href="javascript:;" class="toggle" @click='handleToggle'>切换账号</a>
    </div>
    <div class="shareImg" style="display:none">
      <img :src="share_img_src" alt="">
    </div>
  </div>
  <script src="https://sfile.tl100.com/js/libs/vue.min.js"></script>
  <script src="https://sfile.tl100.com/js/libs/axios.min.js"></script>
  <script src="/js/api.js"></script>
  <script src="/js/wx.js"></script>
  <script src="/js/getuserinfo.js"></script>
  <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
  <!-- Initialize Swiper -->
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        userInfo: {
          realname: '',
          receiving_phone: '150456',
          cashback: '0',
          invitation_count: '0',
          res_sign_up_info: []
        },
        share_img_src: '',
        img: '/img/9_02.png',
        invitation_code: '',
        shareImg: false,
        subject: false,
        use: false,
        receive: false,
      },
      mounted: function () {
        this.getUserInfo();
        this.handleGetQQ();
        var vm = this;
        // 获取分享的图片
        api.post('/api/user/getKqccShareImage', {
          token: localStorage.getItem('token')
        }).then(function (res) {
          vm.share_img_src = res.data.msg;
        })
        // 微信分享，分享出去当前用户的邀请码
        wxObj({
          shareUrl: 'https://m.tl100.com/yyzbk?typeId=2&invitation_code=' + vm.invitation_code,
          title: '赶紧加入考前冲刺集训营！你的成绩还能再抢救一下！',
          desc: '《2018全国高考考前冲刺集训》开营啦！火速加入！',
          link: '&',
          imgUrl: '/img/kqcc_share.jpg'
        });
      },
      methods: {
        handleExpand(i) {
          // 数组需要在页面中循环输出，但是点击不同的内容出现对应的效果所以要根据索引判断
          // 在循环的模板中绑定方法，传入当前索引，只有和传入的索引相同的时候就取反is_expand,显示对应的内容
          this.userInfo.res_sign_up_info.map((item, index) => {
            if (index == i) {
              item.is_expand = !item.is_expand
            }
          })
        },
        getUserInfo() {
          var vm = this;
          getUserInfo(this, localStorage.getItem('token'), '/api/sign_up_kqcc/getUserBuy', function (res) {
            var res_data = res.data.msg;
            // 在接口中获取到的数组添加一个元素，用来区分具体的元素
            res.data.msg.sign_up_info.map(item => {
              item.is_expand = false
            })
            // sign_up_info是购买的所有课程和介绍的数组，如果为空就是没有购买
            vm.userInfo.res_sign_up_info = res.data.msg.sign_up_info;
            vm.userInfo.realname = res_data.realname;
            vm.userInfo.receiving_phone = res_data.phone;
            vm.userInfo.cashback = res_data.cashback;
            vm.userInfo.invitation_count = res_data.invitation_count;
            vm.invitation_code = res_data.invitation_code;
          })
        },
        handleToggle() {
          // 切换账号
          localStorage.removeItem('token');
          location.replace('/jx');
        },
        handleShareImg() {
          // 显示分享的图片
          this.shareImg = true;
          document.querySelector('.shareImg').style.display = 'block';
        },
        handleGetQQ() {
          // 设置进群链接
          api.post('/api/data_lobo/getKqccVIPLink')
            .then(function (res) {
              document.querySelector('.getQQ').href = res.data.address;
            }).catch(function (err) {
              setLog('/api/data_lobo/getKqccVIPLink:fail', JSON.stringify(res.data));
            })
        }
      }
    })


  </script>
</body>

</html>